import PropTypes from 'prop-types';
import React, { memo, useEffect, useRef, useState } from 'react';
import { SwitchTransition, CSSTransition } from 'react-transition-group';

import { PictureBrowserWrapper } from './style';
import IconClose from 'src/assets/svg/icon_close';
import IconArrowLeft from 'src/assets/svg/icon-arrow-left';
import IconArrowRight from 'src/assets/svg/icon-arrow-right';
import IconTriangleBottom from 'src/assets/svg/icon_triangle_bottom';
import IconTriangleTop from 'src/assets/svg/icon_triangle_top';
import Indicator from '../indicator';
import classNames from 'classnames';

const PictureBrowser = memo((props) => {
  const { pictures = [], closeClick } = props;

  const [curIndex, setCurIndex] = useState(0);
  const [isNext, setIsNext] = useState(true);
  const [showList, setShowList] = useState(true);

  const picRef = useRef();
  const imgRef = useRef();
  // 当图片浏览器展示出来的时候，滚动的功能消失
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'outo';
    };
  }, []);
  // 事件监听
  function closeBtnClickHandle() {
    if (closeClick) closeClick();
  }
  function controlClickHandle(isRight = true) {
    let newIndex = isRight ? curIndex + 1 : curIndex - 1;
    if (newIndex < 0) newIndex = pictures.length - 1;
    if (newIndex > pictures.length - 1) newIndex = 0;

    setCurIndex(newIndex);
    setIsNext(isRight);
  }


  function bottomItemClickHandle(index) {
    setIsNext(index > curIndex)
    setCurIndex(index);
  }
  return (
    <PictureBrowserWrapper $isNext={isNext} showList={showList}>
      <div className="top">
        <div className="close-btn" onClick={closeBtnClickHandle}>
          <IconClose />
        </div>
      </div>
      <div className="slider">
        <div className="control">
          <div className="btn left" onClick={(e) => controlClickHandle(false)}>
            <IconArrowLeft width="77" height="77" />
          </div>
          <div className="btn right" onClick={(e) => controlClickHandle(true)}>
            <IconArrowRight width="77" height="77" />
          </div>
        </div>
        <div className="picture">
          <SwitchTransition mode="in-out">
            <CSSTransition key={pictures[curIndex]} classNames="fade" timeout={200} nodeRef={picRef}>
              <img ref={imgRef} src={pictures[curIndex]} alt="" />
            </CSSTransition>
          </SwitchTransition>
        </div>
      </div>
      <div className="preview">
        <div className="info">
          <div className="desc">
            <div className="count">
              <span>
                {curIndex + 1} / {pictures.length} :{' '}
              </span>
              <span>room Apartment图片{curIndex + 1}</span>
            </div>
            <div className="toggle" onClick={(e) => setShowList(!showList)}>
              <span> {showList ? '隐藏' : '显示'}照片列表</span>
              {showList ? <IconTriangleBottom /> : <IconTriangleTop />}
            </div>
          </div>

          <div className="list">
            <Indicator selectIndex={curIndex}>
              {pictures.map((item, index) => (
                <div
                  className={classNames('item', { active: curIndex === index })}
                  key={item}
                  onClick={(e) => bottomItemClickHandle(index)}
                >
                  <img src={item} alt="" />
                </div>
              ))}
            </Indicator>
          </div>
        </div>
      </div>
    </PictureBrowserWrapper>
  );
});

PictureBrowser.propTypes = {
  pictures: PropTypes.array,
};

export default PictureBrowser;
